<script setup>
import ai from '@/imgs/ai.svg';
import wenshu from '@/imgs/wenshu.svg';
import shenhe from '@/imgs/shenhe.svg';
import heyan from '@/imgs/heyan.svg';
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import {
  Navigation,
  Pagination,
  Autoplay,
} from 'swiper/modules'
import { ArrowRightBold } from '@element-plus/icons-vue'

// 必须导入所有相关样式
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const cards = ref([
  {
    uuid: 'ai',
    name: 'AI对话',
    icon: ai,
    capacitys: [
      { title: '自然语言理解', desc: '基于先进的NLP技术，能够理解复杂的<br/>自然语言输入，准确把握用户意图' },
      { title: '知识库集成', desc: '集成企业知识库，能够回答专业领域问<br/>题，提供准确信息' },
      { title: '多轮对话能力', desc: '支持上下文连贯的多轮对话<br/>记住对话历史，提供连贯的回复' }
    ],
    desc: '智能对话助手，可以回答各种问题，提供信息和建议',
    updateDate: '2025-02-16 更新',
    author: '@软通动力',
    path: '/intellectual-dialogue/chat' // http://123.249.71.102:39002
  },
  {
    uuid: 'wenshu',
    name: '智能问数',
    icon: wenshu,
    capacitys: [
      { title: '自然语言转SQL', desc: '将用户的自然语言问题转换为精确的<br/>SQL查询，无需编写代码' },
      { title: '智能数据可视化', desc: '自动选择最合适的图表类型，生成直观<br/>的数据可视化' },
      { title: '数据异常检测', desc: '自动检测数据中的异常模式和趋势，提<br/>供预警和分析' }
    ],
    desc: '数据分析助手，通过自然语言查询复杂数据，生成报表和可视化',
    updateDate: '2025-05-26 更新',
    author: '@软通动力',
    path: '/zhinengwenshu/chat'
  },
  {
    uuid: 'shenhe',
    name: '内容审核',
    icon: shenhe,
    capacitys: [
      { title: '多模态内容识别', desc: '同时支持文本、图像和视频内容的审<br/>核，全方位保障内容安全' },
      { title: '实时审核能力', desc: '毫秒级响应，支持大规模内容的实时审核，满足高并发场景需求' },
      { title: '自定义审核规则', desc: '支持企业自定义审核规则和敏感词库，<br/>灵活适应不同业务场景' }
    ],
    desc: '自动审核文本、图像和视频内容，检测不良信息，保障内容安全',
    updateDate: '2015-09-01',
    author: '@软通动力',
    path: '/pengwei/analyze-word'
  },
  {
    uuid: 'heyan',
    name: '数据核验',
    icon: heyan,
    capacitys: [
      { title: '智能数据清洗', desc: '自动识别并修复数据中的错误、缺失和<br/>异常值，提高数据质量' },
      { title: '数据一致性检查', desc: '跨系统、跨数据源的数据一致性验证，<br/>确保数据的准确性和可靠性' },
      { title: '数据质量报告', desc: '生成详细的数据质量报告，提供数据问<br/>题的可视化分析和改进建议' }
    ],
    desc: '自动验证数据准确性和完整性，检测数据问题，提高数据质量',
    updateDate: '2025-02-21',
    author: '@软通动力',
    path: 'http://123.249.71.102:39001'
  },
  {
    uuid: 'jianli',
    name: '智能简历筛查',
    icon: ai,
    capacitys: [
      { title: '简历匹配性', desc: '基于先进的NLP技术，能够理解复杂的<br/>自然语言输入，准确把握用户意图' },
      { title: '简历合规性', desc: '集成企业知识库，能够回答专业领域问<br/>题，提供准确信息' },
      { title: '简历合规性', desc: '支持上下文连贯的多轮对话<br/>记住对话历史，提供连贯的回复' }
    ],
    desc: '根据岗位自动分析简历合规度和匹配度并给予合理性招聘建议',
    updateDate: '2025-02-23 更新',
    author: '@软通动力',
    path: '/smart-resume/home'
  },
])

const to = (path) => {
  if (path) {
    window.open(path, '_blank')
  }
}

</script>
<template>
  <Swiper
    :speed="500"
    :loop="true"
    :slides-per-view="4"
    :space-between="30"
    :navigation="false"
    :modules="[Autoplay, Pagination, Navigation]"
    :autoplay="{ delay: 2500, pauseOnMouseEnter: true }"
  >
    <SwiperSlide v-for="(item, index) in cards" :key="index">
      <div
        class="card"
        >
        <div class="card-icon">
          <img :src="item?.icon" alt="ai">
        </div>

        <div class="card-top">{{ item?.name }}</div>

        <div class="card-tag">
          <span
            v-for="capacitys in item?.capacitys"
            :key="capacitys.title"
          >{{ capacitys.title}}</span>
        </div>

        <div class="card-desc">{{ item?.desc }}</div>

        <div class="card-date">{{ item?.updateDate }}</div>

        <el-button @click="to(item.path)">
          立即体验
          <el-icon><ArrowRightBold /></el-icon>
        </el-button>

      </div>
    </SwiperSlide>
  </Swiper>
</template>
<style lang="scss" scoped>
.swiper {
  padding-top: 50px;
}
.swiper-wrapper {
  align-items: center;
}
/* 分页点样式 */
// .swiper-pagination-bullet {
//   width: 12px;
//   height: 12px;
//   background: rgba(0,0,0,0.3);
// }

/* 导航按钮样式 */
// .swiper-button-prev:after,
// .swiper-button-next:after {
//   font-size: 24px;
//   color: #ffffff !important;
// }

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  background: white;
  box-sizing: border-box;
  text-align: center;
  padding: 26px;
  border-radius: 16px;
  animation: all 1s ease-in-out;

  &:hover {
    box-shadow: 0px 8px 20px 0px rgba(219, 180, 188, 0.3);
    transform: translateY(-25px);
    transition: all 0.3s ease-in-out;
    // a {
    //   display: block;
    // }
  }
  .card-icon {
    position: absolute;
    top: -35px;
    left: 50%;                 /* 左侧对齐到 50% 位置 */
    transform: translateX(-50%); /* 向左回退自身宽度的 50% */
    padding: 10px;
    background: #fff;
    border-radius: 10px;
  }
  &-top {
    font-size: 30px;
      color: #242424;
      font-weight: 600;
  }

  &-tag {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    span {
      font-size: 12px;
      color: #505D71;
      background: #F0F1F5;
      border-radius: 4px;
      padding: 2px 8px;
      margin-right: 4px;
    }
  }

  &-desc {
    margin-top: 12px;
    font-weight: 550;
    font-size: 16px;
    color: #242424;
    line-height: 28px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-date {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #3D4A66;
  }

  .el-button {
    margin: 20px 0 0;
    width: 100%;
    height: 40px;
    border-color: #F05365;
    color: #fff;
    background: linear-gradient( 91deg, #EB2314 0%, #FF6D6D 100%);
    border-radius: 10px;
    animation: all .3s ease-in-out;
  }

}
</style>